<template>
  <div class="msg-list-wrapper">
    <el-scrollbar :height="height">
      <!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
      <msg-item v-for="item in msgs" :key="item" :avatar-url="item.avatarUrl" :msg="item.msg"
        :posistion="item.posistion"></msg-item>
    </el-scrollbar>
  </div>
</template>

<script>
import MsgItem from './MsgItem.vue'
export default {
  name: 'MsgList',
  components: {
    MsgItem
  },
  props: {
    height: {
      type: String,
      default: "400px"
    },
    msgs: {
      type: Array,
      // 测试数据
      default: () => [
        {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg1🌹",
          posistion: 'left'
        },
        {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg2🙂",
          posistion: 'left'
        },
        {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg3",
          posistion: 'right'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }, {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
          msg: "test msg4",
          posistion: 'left'
        }

      ]
    }
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.msg-list-wrapper {
  // height: 300px;
  padding: 12px 24px;
}
</style>
